<template>
  <div class="box">
      <div class="title">收藏二级评论</div>
      <div class="search">
          <div class="search-input">
              <el-input
              placeholder="输入用户信息"
              v-model="input"
              clearable
              @keydown.enter="searchArt"
              />
          </div>
          <div class="search-search">
              <el-button type="primary" @click="searchArt">搜索</el-button>
          </div>
      </div>
      <div class="body">
          <ul>
              <li>
                  <div>用户昵称</div>
                  <div>题目内容</div>
                  <div>笔记内容</div>
                  <div>创建时间</div>
                  <div>待定</div>
                  <div>操作</div>
              </li>
              <li v-for="(item,index) of 10" :key="index">
                  <div>&nbsp;{{ item.userId }}</div>
                  <div>&nbsp;{{ item.topicId }}</div>
                  <div>&nbsp;{{ item.nodeContent }}</div>
                  <div>&nbsp;{{ item.createTime }}</div>
                  <div>&nbsp;{{  }}</div>
                  <div><el-button type="warning" disabled>修改</el-button>
                      <el-button type="danger" disabled>删除</el-button></div>
              </li>
          </ul>
      </div>
      <div class="pagination">
          <el-pagination
              background
              layout="prev, pager, next"
              :total="allPages"
              @current-change="getPageNum"
              @prev-click="getPageNum"
              @next-click="getPageNum"
          />
      </div>
  </div>
</template>

<script>

// import { getAllComments } from '@/api/secondary_api/PageUserNote'

export default {
data(){
  return{
    commentList:[],//一页用户
    pageNum:1,//当前页
    pageSize:10,//每页显示的条数
    allPages:0//一共多少页
  }
},
methods:{
  // getAllComment(){
  //   getAllComments().then(
  //     response=>{
  //       this.commentList = response.data
  //       if(response.data.length%10 == 0){
  //         this.allPages  = response.data.length/10
  //       }else{
  //         this.allPages = parseInt(response.data.length/10)+1
  //       }
  //   })
  // },
},
mounted(){
  // this.getAllComment()
},
}
</script>

<style scoped>
.box{
width: 100%;
height: 100%;
padding: 2% 4%;
box-sizing: border-box;
}
.title{
width: 100%;
height: 50px;
font-size: 20px;
font-weight: bold;
}
.search{
width: 100%;
height: 60px;
line-height: 30px;
}
.search-input{
width: 30%;
height: 100%;
float: left;
}
.search-search{
width: 10%;
height: 100%;
float: left;
margin-left: 20px;
}
.search-input .el-input{
height: 70% !important;
font-size: 17px;
}
.search-search .el-button{
width: 90%;
height:70%;
font-size: 14px;
}
.body{
width: 100%;
height: 73%;
box-sizing: border-box;
border: 1px solid #ccc;
}
li{
list-style: none;
}
.body>ul{
width: 100%;
height: 100%;
}
.body>ul>li{
width: 100%;
height: 8.97% !important;
}
.body>ul>li>div{
width: 16.5%;
float: left;
height: 100%;
line-height:50px;
box-sizing: border-box;
}
.body>ul>li>div:last-of-type{
text-align: center;
}
.body>ul>li>div:nth-of-type(1)~div{
border-left: 1px solid #ccc;
}
.body>ul>li>div{
padding-left: 10px;
}
.body>ul>li>div{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.body>ul>li:first-of-type{
background-color: #eee;
}
.body>ul>li:nth-of-type(1)~li{
width: 100%;
border-bottom: 1px solid #ccc;
}
.body>ul>li:nth-of-type(11){
border-style: hidden !important;
}

.body>ul>li .el-button:nth-of-type(1){
background-color: #ffb800;
width: 60px;
height: 30px;
}
.body>ul>li .el-button:nth-of-type(1):hover,.body>ul>li .el-button:nth-of-type(2):hover{
opacity: 0.4;
}
.body>ul>li .el-button:nth-of-type(2){
background-color: red;
width: 60px;
height: 30px;
}
.pagination{
width: 100%;
margin-top: 20px;
}
</style>